<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

// 表单数据
const loginForm = reactive({
  username: '',
  password: ''
})

// 表单验证规则
const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const loginFormRef = ref(null)
const loading = ref(false)

// 登录模式切换
const loginMode = ref('account') // account 或 qrcode

// 切换登录模式
const switchLoginMode = (mode) => {
  loginMode.value = mode
  if (mode === 'qrcode') {
    ElMessage.info('扫码登录功能正在开发中，敬请期待！')
  }
}

// 提交表单
const handleLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    loading.value = true
    try {
      const res = await userStore.login(loginForm)
      if (res.success) {
        ElMessage.success('登录成功')
        router.push('/home')
      }
    } catch (error) {
      ElMessage.error('登录失败')
    } finally {
      loading.value = false
    }
  })
}

// 创建粒子动画效果
const canvasRef = ref(null)

onMounted(() => {
  if (canvasRef.value) {
    initParticles()
  }
})

// 粒子初始化
function initParticles() {
  const canvas = canvasRef.value
  const ctx = canvas.getContext('2d')
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight

  let particlesArray = []
  const numberOfParticles = 100
  
  // 调整画布大小
  window.addEventListener('resize', () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  })

  // 粒子类
  class Particle {
    constructor() {
      this.x = Math.random() * canvas.width
      this.y = Math.random() * canvas.height
      this.size = Math.random() * 3 + 1
      this.speedX = Math.random() * 1 - 0.5
      this.speedY = Math.random() * 1 - 0.5
      this.color = `rgba(255, 255, 255, ${Math.random() * 0.5 + 0.2})`
    }
    
    update() {
      this.x += this.speedX
      this.y += this.speedY
      
      if (this.x > canvas.width) this.x = 0
      if (this.x < 0) this.x = canvas.width
      if (this.y > canvas.height) this.y = 0
      if (this.y < 0) this.y = canvas.height
    }
    
    draw() {
      ctx.fillStyle = this.color
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
      ctx.fill()
    }
  }
  
  // 创建粒子
  function init() {
    particlesArray = []
    for (let i = 0; i < numberOfParticles; i++) {
      particlesArray.push(new Particle())
    }
  }
  
  // 添加连线效果
  function connect() {
    const maxDistance = 150
    for (let a = 0; a < particlesArray.length; a++) {
      for (let b = a; b < particlesArray.length; b++) {
        const dx = particlesArray[a].x - particlesArray[b].x
        const dy = particlesArray[a].y - particlesArray[b].y
        const distance = Math.sqrt(dx * dx + dy * dy)
        
        if (distance < maxDistance) {
          const opacity = 1 - distance / maxDistance
          ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.2})`
          ctx.lineWidth = 1
          ctx.beginPath()
          ctx.moveTo(particlesArray[a].x, particlesArray[a].y)
          ctx.lineTo(particlesArray[b].x, particlesArray[b].y)
          ctx.stroke()
        }
      }
    }
  }
  
  // 动画循环
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    for (let i = 0; i < particlesArray.length; i++) {
      particlesArray[i].update()
      particlesArray[i].draw()
    }
    
    connect()
    requestAnimationFrame(animate)
  }
  
  init()
  animate()
}
</script>

<template>
  <div class="login-container">
    <canvas ref="canvasRef" class="particles-canvas"></canvas>
    <div class="login-background"></div>
    <div class="login-content">
      <div class="login-box">
        <h2 class="login-title">系统登录</h2>
        
        <!-- 登录模式切换 -->
        <div class="login-mode-switch">
          <span 
            :class="{ active: loginMode === 'account' }" 
            @click="switchLoginMode('account')"
          >
            账号密码
          </span>
          <span 
            :class="{ active: loginMode === 'qrcode' }" 
            @click="switchLoginMode('qrcode')"
          >
            扫码登录
          </span>
        </div>
        
        <!-- 账号密码登录 -->
        <div v-if="loginMode === 'account'" class="login-form-container">
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="rules"
            label-position="top"
            class="login-form"
          >
            <el-form-item label="用户名" prop="username">
              <el-input 
                v-model="loginForm.username" 
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              />
            </el-form-item>
            
            <el-form-item label="密码" prop="password">
              <el-input 
                v-model="loginForm.password" 
                type="password" 
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                @keyup.enter="handleLogin"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button 
                type="primary" 
                :loading="loading" 
                class="login-button"
                @click="handleLogin"
              >
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 二维码登录 -->
        <div v-else class="qrcode-container">
          <div class="qrcode-box">
            <div class="qrcode-placeholder">
              <i class="el-icon-picture-outline-round"></i>
              <p>二维码加载中...</p>
            </div>
          </div>
          <p class="qrcode-tip">请使用APP扫描二维码登录</p>
        </div>
        
        <div class="login-tips">
          <p>演示账号：admin</p>
          <p>演示密码：123456</p>
        </div>
      </div>
      
      <div class="copyright-info">
        <p>© 2023-{{ new Date().getFullYear() }} 宠物医院管理系统 版权所有</p>
        <p><a href="https://beian.miit.gov.cn" target="_blank">粤ICP备XXXXXXXX号</a></p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  
  .particles-canvas {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  .login-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    z-index: 0;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
    }
  }
  
  .login-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .login-box {
    width: 90%;
    max-width: 450px;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.8s ease;
  }
  
  .login-title {
    margin-bottom: 20px;
    font-size: 28px;
    text-align: center;
    color: #409eff;
    font-weight: 600;
    letter-spacing: 1px;
  }
  
  .login-mode-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    
    span {
      position: relative;
      padding: 8px 24px;
      margin: 0 5px;
      cursor: pointer;
      color: #666;
      transition: all 0.3s;
      font-size: 15px;
      
      &.active {
        color: #409eff;
        font-weight: 500;
        
        &:after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 20px;
          height: 2px;
          background-color: #409eff;
        }
      }
      
      &:hover {
        color: #409eff;
      }
    }
  }
  
  .login-form-container {
    animation: fadeIn 0.5s ease;
  }
  
  .qrcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.5s ease;
    
    .qrcode-box {
      width: 180px;
      height: 180px;
      margin: 10px auto 15px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      
      .qrcode-placeholder {
        text-align: center;
        color: #bbb;
        
        i {
          font-size: 60px;
          margin-bottom: 10px;
        }
        
        p {
          font-size: 14px;
        }
      }
    }
    
    .qrcode-tip {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }
  }
  
  .login-form {
    margin-bottom: 20px;
  }
  
  .login-button {
    width: 100%;
    height: 45px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
    }
  }
  
  .login-tips {
    font-size: 14px;
    color: #999;
    text-align: center;
    margin-top: 15px;
    
    p {
      margin: 5px 0;
    }
  }
  
  .copyright-info {
    position: absolute;
    bottom: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    width: 100%;
    animation: fadeIn 1s ease 0.5s both;
    
    p {
      margin: 5px 0;
      line-height: 1.5;
    }
    
    a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      transition: color 0.3s;
      
      &:hover {
        color: #fff;
        text-decoration: underline;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

// 响应式设计 - 移动端适配
@media (max-width: 768px) {
  .login-container {
    .login-box {
      width: 85%;
      padding: 30px 25px;
    }
    
    .login-title {
      font-size: 24px;
      margin-bottom: 15px;
    }
    
    .login-button {
      height: 40px;
    }
    
    .qrcode-container {
      .qrcode-box {
        width: 150px;
        height: 150px;
      }
    }
    
    .copyright-info {
      bottom: 10px;
      font-size: 11px;
    }
  }
}
</style> 